<template>
	<view class="edit-profile-container">
		<!-- 顶部标题 -->
		<view class="edit-profile-header">
			<u-icon name="arrow-left" size="28" color="#fff" class="back-icon" @click="handleBack" />
			<text class="header-title">修改资料</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 昵称 -->
			<u-form :model="form" ref="uForm">
				<u-form-item label="昵称" prop="nickname">
					<u-input v-model="form.nickname" placeholder="请输入昵称" />
				</u-form-item>
				<!-- 邮箱 -->
				<u-form-item label="邮箱" prop="email">
					<u-input v-model="form.email" placeholder="请输入邮箱" />
				</u-form-item>
				<!-- 手机号 -->
				<u-form-item label="手机号" prop="mobile">
					<u-input v-model="form.mobile" placeholder="请输入手机号" />
					<text v-if="mobileError" class="error-text">请输入有效的手机号</text>
				</u-form-item>
				<!-- 性别 -->
				<u-form-item label="性别" prop="sex">
					<u-radio-group v-model="form.sex">
						<u-radio :name="1" label="女"></u-radio>
						<u-radio :name="2" label="男"></u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
		</view>

		<!-- 保存按钮 -->
		<view class="save-button">
			<u-button type="primary" @click="handleSave" :loading="loading">保存</u-button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
//import { useRouter } from 'uni-mini-router';

// 获取路由实例
//const router = useRouter();

// 表单数据
const form = ref({
	nickname: '',
	email: '',
	mobile: '',
	sex: 1, // 1: 男, 2: 女
});

// 加载状态
const loading = ref(false);

// 手机号校验状态
const mobileError = ref(false);

// 返回上一页
const handleBack = () => {
	router.back();
};

// 校验手机号
const validateMobile = (mobile) => {
	const reg = /^1[3-9]\d{9}$/;
	return reg.test(mobile);
};

// 保存修改
const handleSave = () => {
	if (!form.value.nickname || !form.value.email || !form.value.mobile) {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none',
		});
		return;
	}

	// 校验手机号
	if (!validateMobile(form.value.mobile)) {
		mobileError.value = true;
		uni.showToast({
			title: '请输入有效的手机号',
			icon: 'none',
		});
		return;
	} else {
		mobileError.value = false;
	}

	loading.value = true;

	const tenantId = uni.getStorageSync('tenantId');
	const accessToken = uni.getStorageSync('accessToken');

	uni.request({
		url: 'http://127.0.0.1:48080/admin-api/system/user/profile/update',
		method: 'PUT',
		header: {
			'Tenant-Id': tenantId,
			Authorization: `Bearer ${accessToken}`,
			'Content-Type': 'application/json',
		},
		data: form.value,
		success: (res) => {
			if (res.data.code === 0) {
				uni.showToast({
					title: '修改成功',
					icon: 'success',
				});
				// 更新本地缓存
				uni.setStorageSync('userProfile', JSON.stringify(form.value));
				console.log('更新后的===》', JSON.stringify(form.value));
				// 返回上一页并刷新数据
				//const pages = getCurrentPages();
				// const prevPage = pages[pages.length - 2]; // 获取上一页实例
				// if (prevPage && prevPage.$vm.fetchUserProfile) {
				// 	prevPage.$vm.fetchUserProfile(); // 调用上一页的刷新方法
				// }
				// 发送刷新事件
				uni.$emit('refreshUserData');

				uni.navigateTo({
					url: '/pages/my/my',
				});
			} else {
				uni.showToast({
					title: '修改失败',
					icon: 'none',
				});
			}
		},
		fail: (err) => {
			console.error('请求失败:', err);
			uni.showToast({
				title: '网络请求失败',
				icon: 'none',
			});
		},
		complete: () => {
			loading.value = false;
		},
	});
};

// 页面加载时初始化表单数据
onMounted(() => {
	const cachedProfile = uni.getStorageSync('userProfile');
	if (cachedProfile) {
		form.value = {
			nickname: cachedProfile.nickname,
			email: cachedProfile.email,
			mobile: cachedProfile.mobile,
			sex: cachedProfile.sex,
		};
	}
});
</script>

<style scoped>
/* 页面容器 */
.edit-profile-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: linear-gradient(135deg, #6a11cb, #2575fc);
}

/* 顶部标题 */
.edit-profile-header {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.1);
}
.back-icon {
	cursor: pointer;
}
.header-title {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	margin-left: 10px;
}

/* 表单区域 */
.form-container {
	margin: 20px;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 保存按钮 */
.save-button {
	margin: 20px;
}

/* 错误提示 */
.error-text {
	font-size: 12px;
	color: #ff4444;
	margin-top: 5px;
}
</style>
